<template>
    <layout-card style="padding: 0px;" headline="检查区域列表" :hasButton="true">
        <template #action>
            <el-button type="primary">预览</el-button>

            <el-button type="primary" @click="handleCreate">新增</el-button>
        </template>
        <table-common style="margin: 0px;padding: 0px;" stripe="true" :columns="mapListColumns" :pagination="pager"
            :table-data="mapTableData" size="large" @current-change="changeCurrent" @size-change="changePageSize">
            <template #action="{ row }">
                <!-- 自定义操作栏示例  -->
                <el-button class="link-btn" @click="handleEdit(row)" link type="primary">编辑</el-button>
                <el-popconfirm title="是否删除?" confirmButtonText="确定" cancelButtonText="取消" @confirm="() => DeletRow(row)">
                    <template #reference>
                        <el-button class="link-btn" link type="danger">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </table-common>
    </layout-card>

    <mapEdit :visible2="editVisible" style="z-index:9999;" @cancel="cancel" @mapDate="handelMapData" :echo-data="echoData"
        :view="view"></mapEdit>
</template>

<script setup lang="ts">
import mapEdit from './mapEdit.vue';
import LayoutCard from "@/components/LayoutCard/index.vue";
import TableCommon from "@/components/TableCommon/index.vue";
import { computed, ref, watch } from 'vue';
import { mapListColumns } from "@/views/secure/archives/examineInfo/config/columns2";

// 分页和数据展示参数
const current = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tabledata = ref([]);

let echoData = ref([]);// 回显地图组件
let view = ref(true);

const editVisible = ref(false);// 弹出层状态

// 处理地图组件数据
const handelMapData = (data: any) => {
    console.log('data', data);

    if (data.id != 0) {// 编辑
        let newData = props.mapTableData?.filter(item => item.id != data.id);
        if (newData?.length == 0) {
            props.mapTableData?.splice(0, props.mapTableData.length);
            props.mapTableData?.push(data);
            tabledata.value = props.mapTableData;
            emit('changMapTable', tabledata.value)
        } else {
            newData?.push(data);
            tabledata.value = newData;
            emit('changMapTable', tabledata.value)
        }
    } else {// 新增
        console.log(props.mapTableData);
        setTimeout(() => {
            props.mapTableData?.push(data);
            tabledata.value = props.mapTableData;
            emit('changMapTable', tabledata.value)
        }, 400);
    }
}

// 删除
const DeletRow = (row: any) => {
    console.log('del', row);
    let newData = props.mapTableData?.filter(item => item.areaName != row.areaName);
    tabledata.value = newData;

    emit('changMapTable', tabledata.value)
};

const emit = defineEmits(['changMapTable'])

const props = defineProps({
    mapTableData: {
        type: Array,
        defult: () => []
    }
})

const cancel = () => {
    editVisible.value = false;
    echoData.value = {};
}

// 编辑
const handleEdit = async (row: any) => {
    // 开启弹出层
    editVisible.value = true;
    echoData.value = row;
};

// 新增
const handleCreate = (val: any) => {
    // 开启弹出层
    editVisible.value = true;
};

const pager = computed(() => ({
    currentPage: current.value,
    pageSize: pageSize.value,
    total: total.value,
    pageCount:
        Math.ceil(total.value / pageSize.value) === 0
            ? 1
            : Math.ceil(total.value / pageSize.value),
}));
const changeCurrent = (value: number) => {
    current.value = value;
};
const changePageSize = (size: number) => {
    pageSize.value = size;
};
</script>

<style scoped></style>
